<template>
  <div class="flex-container">
    <div class="f-header">
      <div class="header-center fl">
        <div class="header-title">
          <img v-if="logoSrc" :src="logoSrc" alt="" />
          智能照明管理平台
        </div>
        <div class="header-img"></div>
      </div>
      <div class="header-bottom fl"></div>
    </div>
    <div class="f-content">
      <TeXiao></TeXiao>
      <div class="content-left"></div>
      <div class="content-right">
        <div class="login-title-box">
          <img src="/src/assets/icon/Userlogin.png" alt="" style="margin-right: 20px; vertical-align: sub" />
          <span class="login-input-box-title">用户登录</span>
        </div>
        <div class="login-input-box">
          <div class="right-infp-name">
            <label class="admin__">账号：</label>
            <input type="text" name="loginname" placeholder="请输入用户名" v-model="data.mobile" autocomplete="off"
              lay-verify="username" />
          </div>
          <div class="right-infp-name">
            <label class="admin__">密码：</label>
            <input type="password" name="pwd" placeholder="请输入密码" v-model="data.password" autocomplete="off"
              lay-verify="password" @keyup.enter="onLogin" />
          </div>
          <div class="right-infp-btn" @click="onLogin">
            登录
          </div>
        </div>
      </div>
    </div>
    <div class="f-footer">
      <p>
        <a rel="nofollow" href="https://beian.miit.gov.cn" target="_blank">粤ICP备2022042683号</a>
        <span>|</span>Copyright ©2022 深圳市{{ logoTitle }}有限公司 All Rights
        Reserved<span>|</span>最佳分辨率为1920*1080<span>|</span>当前平台版本4.0517.1
      </p>
    </div>
  </div>
  <Particles id="tsparticles" class="login-particles" :particlesInit="particlesInit" :particlesLoaded="particlesLoaded"
    :options="options" />
</template>
<script setup>

import { loadFull } from "tsparticles";
import TeXiao from "@/views/Login/texiao.vue";
import { userLogin, getTenantInfo } from "@/api/loginApi";
import optionsBGJson from "@/views/Login/options_bg.json";
import qlmlogo from "@/assets/img/logov.png";
const { appContext: { config: { globalProperties } } } = getCurrentInstance();
let $httpUrl2 = globalProperties.$httpUrl2;
let store = useMainStore();

const options = reactive(optionsBGJson);
let data = reactive({
  mobile: "", //账号
  password: "", //密码
  code: "", //验证码
  codeImg: "", //图片验证码
  codeText: "获取验证码", //
  count: 60,
  disabledCode: false, //是否禁用验证码
  timer: null,
  register: {
    //注册信息
    password: "", //密码
    code: "", //验证码
    noPassword: "", //确认密码
    singTrue: false, //是否禁用注册按钮
  },
  loginType: 1,
  type: 1,
  imgCode: "", //图形码答案
  imageCodeShow: true
});

const particlesInit = async (engine) => {
  await loadFull(engine);
};

const particlesLoaded = async (container) => {
  // console.log(container);
};
// 登录
const onLogin = async () => {
  if (data.mobile == "") {
    ElMessage({ message: "用户名不能为空", type: "warning" });
    return;
  }
  if (data.password == "") {
    ElMessage({ message: "密码不能为空", type: "warning" });
    return;
  }
  let params = { loginname: data.mobile, rememberMe: true };
  if (data.loginType == 1) { params.pwd = data.password }
  let obj = new FormData();
  obj.append("loginname", data.mobile);
  obj.append("pwd", data.password);
  obj.append("rememberMe", true);
  let str = '登录中'
  const loading = ElLoading.service({
    lock: true, text: `${str}...`,
    background: "rgba(0, 0, 0, 0.7)",
  });
  const res = await userLogin(obj)
  console.log('res->', res);
  if (loading) { setTimeout(() => { loading.close() }, 1000) }
  if (res.code === 200) {
    localStorage.setItem('info', JSON.stringify(res.data))
    store.getMenu("/index", loading, str)
    return;
  } else {
    ElNotification({
      title: "温馨提示",
      message: res.message,
      type: "error",
      duration: 3000
    }); return;
  }
};

let logoSrc = ref(null);
let logoTitle = ref('');

const getIotTenantInfo = async () => {
  let hn = window.location.hostname
  // let surl = `http://cn.qlmsmart.com/public/img/get?domain=${hn}`
  let murl = `https://qlmsmart.com/public/img/get?domain=${hn}`
  const res = await getTenantInfo(murl)
  if (res.data) {
    logoSrc.value = `data:image/jpg;base64,${res.data.binData || null}`
    logoTitle.value = res.data.description || '';
  } else {
    logoSrc.value = qlmlogo;
    logoTitle.value = '强流明';
  }
  localStorage.setItem('tenantInfo', logoTitle.value)
}

onMounted(() => {
  getIotTenantInfo()
});
</script>

<style lang="scss" scoped>
.particles {
  position: absolute;
  z-index: 999;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
}

.flex-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  text-align: center;

  .f-header {
    height: 5.5rem;
    width: 100%;
    align-self: flex-start;
    margin-top: 30px;

    .header-title {
      text-align: center;
      color: #ffffff;
      font-size: 2.2rem;
      text-shadow: 0 0 .3rem #00d8ff;

      img {
        width: 18rem;
      }
    }
  }

  .f-content {
    width: 100%;
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;

    .content-left {
      width: 45rem;
      height: 45rem;
      background: url("/src/assets/img/d.png") no-repeat;
      background-size: 100% 100%;
      padding: 0.4rem 0;
      box-sizing: border-box;
      margin-right: 2%;
      float: left;
      animation: rotation 15s linear infinite;
      -moz-animation: rotation 15s linear infinite;
      -webkit-animation: rotation 15s linear infinite;
      -o-animation: rotation 15s linear infinite;
    }

    .content-right {
      width: 30rem;
      height: 33rem;
      background: rgba(10, 30, 80, 0.7);
      border-radius: 5px;
      position: relative;
      user-select: none;
      box-shadow: 0px 10px 60px #395d83;
      border: 2px solid #186baf;
      animation: shows 1s forwards;
      transform: scale(0.7);
      opacity: 0;

      .login-title-box {
        padding: 2.8rem;
      }

      .login-input-box-title {
        opacity: 0.9;
        color: rgb(255, 255, 255);
        font-family: Noto Sans SC;
        font-size: 2rem;
        letter-spacing: 0px;
        text-align: left;
      }

      .login-input-box {
        padding: 0 3rem;

        .right-infp-name {
          background: rgb(10, 25, 70);
          width: 98%;
          height: 3.0rem;
          background-size: 100% 100%;
          line-height: 3.0rem;
          margin-bottom: 2.5rem;
          position: relative;
          border: 2px solid rgb(70, 100, 160);
          border-radius: 2px;
          overflow: hidden;
          display: flex;

          label {
            font-size: 1rem;
            color: #fff;
            border-right: 2px solid #4664a0;
            width: 6.6rem;
          }

          input {
            width: 100%;
            height: 100%;
            padding-left: 1rem;
            font-size: 1.2rem;
            background-color: #fff;
            color: #212121;
          }
        }

        .right-infp-btn {
          width: 100%;
          height: 3.5rem;
          cursor: pointer;
          font-size: 1.88rem;
          line-height: 3.5rem;
          background-size: 100% 100%;
          background: rgb(25, 140, 250);
        }

        .loding {
          background: #2e3741;
        }

        .right-infp-btn .btn {
          border: none;
          box-sizing: border-box;
          height: 3.5rem;
          margin-left: 0.1rem;
          font-size: 1.2rem;
          cursor: pointer;
          background: none;
          outline: none;
          color: #fff;
        }
      }
    }

    @keyframes shows {
      to {
        transform: scale(1);
        opacity: 1
      }
    }


    @keyframes rotation {
      from {
        -webkit-transform: rotate(0deg);
      }

      to {
        -webkit-transform: rotate(-360deg);
      }
    }
  }

  .f-footer {
    height: 5.5rem;
    width: 100%;
    align-self: flex-end;
    color: #fff;
    font-size: 1rem;

    p {
      margin-top: 2.66rem;
    }

    a {
      color: #fff;
    }

    span {
      margin: 0px 5px;
    }
  }
}
</style>
